<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生管理系统 - 查询</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f7fc;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    header {
      background-color: #4CAF50;
      color: white;
      padding: 15px;
      text-align: center;
    }
    h1 {
      margin: 0;
    }
    .container {
      width: 90%;
      margin: 20px auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
      color: #333;
    }
    td {
      background-color: #f9f9f9;
    }
    button {
      padding: 5px 15px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
    }
    a {
      text-decoration: none;
    }
    input[type="text"] {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 250px;
      margin-right: 10px;
    }
    .search-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>学生管理系统</h1>
  </header>
  
  <div class="container">
    <div class="search-section">
      <a href="/add.html"><button>添加学生</button></a>
      <div>
        <input type="text" id="searchQuery" placeholder="请输入学生姓名">
        <button onclick="searchStudents()">查询</button>
      </div>
    </div>
    
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>专业</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="studentTable"></tbody>
    </table>
  </div>

  <script>
    window.onload = function() {
      // 加载学生列表
      fetch('/students')
        .then(response => response.json())
        .then(data => {
          renderStudentTable(data);
        });
    };

    function renderStudentTable(data) {
      const tableBody = document.getElementById('studentTable');
      tableBody.innerHTML = '';  // 清空表格内容
      data.forEach(student => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${student.id}</td>
          <td>${student.name}</td>
          <td>${student.age}</td>
          <td>${student.major}</td>
          <td>
            <a href="/edit.html?id=${student.id}"><button>编辑</button></a>
            <a href="/students/delete/${student.id}"><button>删除</button></a>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }

    function searchStudents() {
      const query = document.getElementById('searchQuery').value;
      fetch(`/students/search?name=${query}`)
        .then(response => response.json())
        .then(data => {
          renderStudentTable(data);
        });
    }
  </script>
</body>
</html>
